import { inject, observer } from 'mobx-react';
import { observable, action, toJS } from 'mobx';

import { WeaFormItem, WeaTools, WeaButton, WeaSelect, WeaInput,WeaSearchGroup,WeaBrowser } from 'ecCom';
import { Popover, Button, Row, Col } from 'antd';
import { WeaForm, WeaSwitch } from 'comsMobx';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const types = WeaTools.types;
const getKey = WeaTools.getKey;

@inject('meetingRoomPlan')
@observer
class RoomPlanContainer extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      maskClosable: true,
      showPopover: false,
      equipment: '', //高级搜索 会议室设备值受控
    }
  }
  
  componentDidMount () {
    const {meetingRoomPlan} = this.props;
    const {form} = meetingRoomPlan;
  }
  
  componentWillReceiveProps (nextProps) {
  }

  
  render () {
    const {meetingRoomPlan,roomName,mrtype} = this.props
    const content = (
      <div ref="contentWrapper">
        <div className="popover-search-content" style={{"paddingLeft":"0"}} >{this.getType()}</div>
        <div className="popover-search-btn">
          <WeaButton ecId={`${this && this.props && this.props.ecId || ''}_WeaButton@fo2zmg`} className="btn-left" type="primary" size="large"
                     onClick={() => {
                       this.setState({showPopover: false,});
                       this.props.query(roomName,"",true,mrtype);
                     }}
                     text={getLabel(197,"搜索")}
          />
          <WeaButton ecId={`${this && this.props && this.props.ecId || ''}_WeaButton@f8wbik`} size="large"
                     onClick={() => {
                       this.props.roomNameChange('');
                       this.props.mrtypeChange('');
                       this.setState({equipment: ''})
                       meetingRoomPlan.advanceSearchParams = {
                         ...meetingRoomPlan.advanceSearchParams,
                         roomname: '',
                         mrtype: '',
                         equipment: '',
                       }
                       meetingRoomPlan.form.resetForm();
                     }}
                     text={getLabel(2022,"重置")}
          />
        </div>
      </div>
    )
    
    return (
      <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@l7609c`}
        visible={this.state.showPopover}
        placement="bottom"
        content={content}
        trigger="click"
        onVisibleChange={(v) => {this.setState({showPopover: v})}}
        mask={true}
        zIndex={1070}
        maskClosable={this.state.maskClosable}
        overlayClassName="wea-meeting-popover"
      >
        <span style={{display: 'inline-block', width: 25, cursor: 'pointer', fontSize: 14, color: '#b2b2b2'}} className="icon-coms-screen"></span>
      </Popover>
    )
  }
  
  getType = () => {
    const {meetingRoomPlan,roomPlanType,roomPlanId} = this.props
    let {form, searchFields} = meetingRoomPlan
    searchFields = toJS(searchFields)
    const {isFormInit} = form
    const arr = []
  
    isFormInit && searchFields.map((c, index) => {
      let items=[];
      c.items.map(
        field => {
          const type = field.conditionType.toUpperCase()
          const key = getKey(field)
          const bindObj = form.$(key)
          let col = 1;
          if (field.conditionType.toUpperCase() == WeaTools.types.CASCADER) col = 1;
            if(roomPlanType||roomPlanId){
                if(type == types.INPUT||type == types.BROWSER){
                  items.push({
                      com:(
                          <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@h72zty@${field.domkey[0]}`}
                              label={`${field.label}`}
                              labelCol={{span: `${field.labelcol}`}}
                              wrapperCol={{span: `${field.fieldcol}`}}
                              ratio1to2
                              style={{"paddingTop":"0","paddingBottom":"0"}}
                          >
                              {this.getSearchInfo(type, field, bindObj)}
                          </WeaFormItem>
                      ),
                      col: col,
                      hide: form.isHide(field, (keys, allParams) => {
                          let bool = false;
                          return bool;
                      })
                    })
              
            }
          }else{
              if(type == types.SELECT||type == types.INPUT||type == types.BROWSER){
                items.push({
                    com:(
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@hgoy3a@${field.domkey[0]}`}
                            label={`${field.label}`}
                            labelCol={{span: `${field.labelcol}`}}
                            wrapperCol={{span: `${field.fieldcol}`}}
                            ratio1to2
                            style={{"paddingTop":"0","paddingBottom":"0"}}
                        >
                            {this.getSearchInfo(type, field, bindObj)}
                        </WeaFormItem>
                    ),
                    col: col,
                    hide: form.isHide(field, (keys, allParams) => {
                        let bool = false;
                        return bool;
                    })
                  })
            }else{
                items.push({
                    com: (
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@0n4h04@${field.domkey[0]}`}
                            label={`${field.label}`}
                            labelCol={{ span: `${field.labelcol}` }}
                            ratio1to2
                            error={form.getError(field)}
                            tipPosition="bottom"
                            style={{"paddingTop":"0","paddingBottom":"0"}}
                            wrapperCol={{ span: `${field.fieldcol}` }}>
                            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@7kxymn@${field.domkey[0]}`}
                                fieldConfig={field} form={form}
                                onChange={(...args) => {
                                    this.setState({
                                        showPopover: true,
                                        maskClosable: true
                                    })
                                    bindObj.onChange(...args)
                                }}
                                onFocus={() => {
                                    this.setState({maskClosable: false})
                                }}
                                onBlur={() => {
                                    this.setState({maskClosable: true})
                                }}
                                onOpen={() => {
                                    this.setState({maskClosable: false})
                                }}
                                onClose={() => {
                                    this.setState({maskClosable: true})
                                }}
                                onSearch={() => {
                                    this.setState({maskClosable: false})
                                }}
                            />
                        </WeaFormItem>
                    ),
                    col: col,
                    hide: form.isHide(field, (keys, allParams) => {
                        let bool = false;
                        return bool;
                    })
                })


            }
          }
    


        })
        arr.push( <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ez7z2f@${index}`}  style={{"paddingLeft":"0","paddingRight":"0"}} needTigger={true} title={''} showGroup={c.defaultshow} items={items} />);
    })
    return arr
  }

  //处理搜索工具
  getSearchInfo = (type, item, bindObj) => {
    const {meetingRoomPlan,roomPlanType} = this.props;
    const {form} = meetingRoomPlan;
    if (type == types.SELECT) {
        if(item.domkey == 'mrtype'){
         if(roomPlanType){

              return (
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@iaeakj`} height={200} style={{minWidth:'190px'}}
                          {...item}
                          {...bindObj.bind()}
                          value = {roomPlanType}
                          viewAttr = {1}
                          layout={this.refs.contentWrapper}
                          onChange={(...args) => {
                              this.props.mrtypeChange(args[0])
                              this.setState({
                                  showPopover: true,
                                  maskClosable: true
                              })
                              meetingRoomPlan.advanceSearchParams = {
                                  ...meetingRoomPlan.advanceSearchParams,
                                  mrtype: roomPlanType ,
                              }
                              
                              bindObj.onChange(...args)
                          }}
                          onFocus={() => {
                              this.setState({maskClosable: false})
                          }}
                          onBlur={() => {
                              this.setState({maskClosable: true})
                          }}
                >
                </WeaSelect>
            )
         }else{
            return (
              <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@b0uu86`} height={200} style={{minWidth:'190px'}}
                        {...item}
                        {...bindObj.bind()}
                        layout={this.refs.contentWrapper}
                        onChange={(...args) => {
                          this.props.mrtypeChange(args[0])
                            this.setState({
                                showPopover: true,
                                maskClosable: true
                            })
                            meetingRoomPlan.advanceSearchParams = {
                                ...meetingRoomPlan.advanceSearchParams,
                                mrtype: args[0],
                            }
                            
                            bindObj.onChange(...args)
                        }}
                        onFocus={() => {
                            this.setState({maskClosable: false})
                        }}
                        onBlur={() => {
                            this.setState({maskClosable: true})
                        }}
              >
              </WeaSelect>
          )
         }
            
        }else {
            return (
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@ymw8gu`} height={200}
                           {...item}
                           {...bindObj.bind()}
                           layout={this.refs.contentWrapper}
                           onChange={(...args)=>
                           {
                               this.setState({
                                   showPopover: true,
                                   maskClosable: true
                               });
                               bindObj.onChange(...args)
                           }}
                           onFocus={() => {
                               this.setState({maskClosable: false})
                           }}
                           onBlur={() => {
                               this.setState({maskClosable: true})
                           }}
                >
                </WeaSelect>
            )

        }

    }
    if (type == types.INPUT) {
      if(item.domkey == 'roomname'){
        return (
          <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@dhwr1r`}
            {...item}
            {...bindObj.bind()}
            value={this.props.roomName}
            onChange = {(v) => {
              this.props.roomNameChange(v)
            }}
          />
        )
      }else if(item.domkey == 'equipment'){
        return (
          <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@6a7r63`}
            {...item}
            {...bindObj.bind()}
            value = {this.state.equipment}
            onChange = {(v) => {
              this.setState({equipment: v})
              meetingRoomPlan.advanceSearchParams = {
                ...meetingRoomPlan.advanceSearchParams,
                equipment: v,
              }
            }}
          />
        )
      }else {
          return (
              <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@thh446`}
                  {...item}
                  {...bindObj.bind()}
              />
          )
      }
    }else if(type == types.BROWSER){
        return (
            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@p1z0wg`}
                {...bindObj.bind()}
                {...item.browserConditionParam}
                zIndex={"1080"}
                replaceDatas={toJS(bindObj.valueObj)}
                onChange={(...args)=> {
                    this.setState({maskClosable: true});
                    bindObj.onChange(...args)
                }}

                onFocus={() => {
                    this.setState({maskClosable: false})
                }}
                onBlur={() => {
                    this.setState({maskClosable: true})
                }}
                 onOpen={() => {
                   this.setState({maskClosable: false})
                }}
                onClose={() => {
                   this.setState({maskClosable: true})
                 }}
                // onSearch={() => {
                //      this.setState({maskClosable: false})
                // }}
                layout={document.body}
            />
        )

    }
  }
}

export default RoomPlanContainer
